<template>
	<div style="display: flex;">

		<el-scrollbar height="100vh" style="width:550px;margin: 40px;" @scroll="scroll">
			<div style="position: relative;" :style="{height:imgurl!=''?'':'100vh'}">
				<el-image v-if="imageShow" ref="rimage" style="width:375px; " :src="getImageUrl()" slot=placeholder lazy
					@load="imgload" />
				<canvas ref="MyCans" id='MyCans' style="position: absolute;top:0;left:0;width:375px;"></canvas>
			</div>

		</el-scrollbar>
		<el-scrollbar height="100vh" style="padding: 40px 20px;width: 100%;">
			<div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px dashed #000;">
				<div>
					<div style="font-size: 34rpx;font-weight: 700;margin-right: 40px;">活动图片：</div>
					<UploadImage v-model:url='imgurl' @select="success" />
				</div>
				<div>
					<div style="font-size: 34rpx;font-weight: 700;margin-right: 40px;">分享图：</div>
					<UploadImage ref="up" v-model:url='data.shareImg' @select="shareSuccess" />
				</div>
			</div>



			<div style="display: flex;align-items: center;padding-top: 20px;">
				<div style="font-size: 34rpx;font-weight: 700;margin-right: 40px;">添加事件：</div>
				<el-button type="primary" @click="add">添加</el-button>
				<el-button type="error" @click="clears">清空</el-button>
			</div>
			<div
				style="margin-top: 20px;border-top: 1px dashed #000;padding-top: 20px;text-align: center;font-size: 34rpx;font-weight: 700;">
				事件列表</div>
			<div v-for="(item,index) in data.list"
				style="margin-top: 20px;border-top: 1px dashed #000;padding-top:20px;display: flex;align-items: center;justify-content: space-between;">
				<div style="width: 350px;">
					<div style="margin-bottom: 10px;">事件名称: {{item.title}}</div>
					<div>跳转路径: {{item.url}}</div>
				</div>
				<div>
					<el-input v-model="item.title">
					</el-input>
					<el-input v-model="item.url">
					</el-input>
				</div>
				<el-button type="warning" @click="del(index)">删除</el-button>
			</div>
		</el-scrollbar>
		<WMModel v-model:show="show" v-model:params="data.params" :form="data.formAttr" :type="false"
			:rules="data.rules" ref="valid">
			<template #footer>
				<el-button type="warning" @click="cancel()">取消</el-button>
				<el-button type="success" @click="saveItem()">完成</el-button>
			</template>
		</WMModel>
	</div>
</template>


<script>
	import {
		reactive,
		defineComponent,
		onMounted,
		toRef,
		toRefs,
		ref
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import UploadImage from '/@/components/upload/UploadImage.vue'
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		GLOBAL_DATA
	} from '/@/api/constant'
	import WMModel from '/@/components/from/WMModel.vue'

	export default {
		name: 'Cusact',
		components: {
			UploadImage,
			WMModel
		},
		props: {
			name: {
				name: String,
				default: ""
			},
		},
		setup(props) {

			const getBaseUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			const imgurl = ref('')

			const getImageUrl = () => {
				return getBaseUrl() + imgurl.value;
			}

			const MyCans = ref(null)
			let ctx;
			let mouseDown = false
			const valid = ref(null)
			const show = ref(false)
			const data = reactive({
				flag: false,
				x: 0,
				y: 0,
				ctx: {},
				startX: 0,
				startY: 0,
				list: [],
				params: {},
				shareImg: '',
				formAttr: [{
						name: "名称",
						field: "title",
						model: "input"
					},
					{
						name: "路径",
						field: "url",
						model: "inputPath"
					},
				],
				rules: {
					title: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 32,
							message: '长度在 2 到 32个字符',
							trigger: 'blur'
						}
					],
					url: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				}
			})
			const params = reactive({})

			const addList = (x1, y1, x2, y2, url, name) => {
				data.list.push({
					x1: x1,
					y1: y1,
					x2: x2,
					y2: y2,
					url: url,
					title: name
				})
				console.log(data.list);
			}


			const pushFill = () => {
				if (data.list.length == 0) {
					return
				}

				ctx.beginPath()
				data.list.forEach(item => {
					const rect = getRect(item.x1, item.y1, item.x2, item.y2);
					ctx.lineWidth = 1
					ctx.strokeStyle = "#aa00ff"
					ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
					ctx.save()
					ctx.restore()
				})
				ctx.closePath()

			}



			onMounted(() => {
				ctx = MyCans.value.getContext("2d");
				const canvasWidth = MyCans.value.offsetWidth;
				MyCans.value.width = canvasWidth;
				MyCans.value.addEventListener('mousedown', onMouseDown);
				MyCans.value.addEventListener('mouseup', onMouseUp);
				MyCans.value.addEventListener('mousemove', onMouseMove);
			})

			const onMouseDown = (evt) => {
				if (data.flag) {
					mouseDown = true;
					data.startX = evt.offsetX;
					data.startY = evt.offsetY;
				}

			}

			const onMouseUp = (evt) => {
				if (data.flag) {
					mouseDown = false;
					const rect = getRect(evt.offsetX, evt.offsetY);
					pushFill()
					open(data.startX, data.startY, evt.offsetX, evt.offsetY)
				}
			}

			const onMouseMove = (evt) => {
				if (mouseDown) {
					clear();
					draw(data.startX, data.startY, evt.offsetX, evt.offsetY);
				}
			}

			const draw = (x1, y1, x2, y2) => {
				const rect = getRect(x1, y1, x2, y2);
				ctx.lineWidth = 1
				ctx.strokeStyle = "#aa00ff"
				ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
				ctx.save()
				ctx.restore()

			}
			const clears = () => {
				data.list = []
				ctx.clearRect(0, 0, MyCans.value.width, MyCans.value.height);
			}
			const clear = () => {
				ctx.clearRect(0, 0, MyCans.value.width, MyCans.value.height);
				pushFill()
			}
			const del = (index) => {
				ctx.clearRect(0, 0, MyCans.value.width, MyCans.value.height);
				data.list.splice(index, 1)
				pushFill()
			}
			const getRect = (x1, y1, x2, y2) => {
				const x = Math.min(x1, x2);
				const y = Math.min(y1, y2);
				const w = Math.abs(x1 - x2);
				const h = Math.abs(y1 - y2);
				return {
					x,
					y,
					w,
					h
				};
				console.log(x, y, w, h);
			}
			const add = () => {
				data.flag = true
			}

			const open = (x, y, x1, y1) => {
				data.params = {
					x,
					y,
					x1,
					y1
				}
				show.value = true
			}

			const getParams = () => {
				let params = {}
				params.list = data.list
				params.name = props.name
				params.image = imgurl.value
				params.shareImg = data.shareImg
				return params;
			}
			const imageShow = ref(false)
			const up = ref(null)
			const setParams = (res) => {
				data.list = res.list
				imgurl.value = res.image
				imageShow.value = true
				data.shareImg = res.shareImg
				console.log('>>sharing>>', data.shareImg)
				//pushFill()
			}
			const success = (res) => {
				imgurl.value = res
				imageShow.value = true
			}

			const shareSuccess = (res) => {
				data.shareImg = res
			}

			const saveItem = () => {
				valid.value.valid((res) => {
					if (res) {
						addList(data.params.x, data.params.y, data.params.x1, data.params.y1, data.params.url,
							data.params.title)
						show.value = false
					}
				})
			}
			const cancel = () => {
				show.value = false
				clear()
				pushFill()
			}
			const scroll = (e) => {}
			const rimage = ref(null)
			const imgload = (e) => {
				let n = 375 / rimage.value.imgWidth
				let h = rimage.value.imgHeight * n
				MyCans.value.height = h;
				pushFill()
				console.log('价值成功', h)
			}
			return {
				imgurl,
				MyCans,
				data,
				open,
				add,
				clear,
				clears,
				del,
				getParams,
				setParams,
				getImageUrl,
				success,
				valid,
				show,
				saveItem,
				cancel,
				scroll,
				imgload,
				rimage,
				imageShow,
				shareSuccess,
				up

			}
		}

	}
</script>

<style scoped>

</style>